<template>
    <!-- 收藏按钮 -->
    <div class="flex">
        <div class="star-btn flex flex-ac" @click="handleClick">
            <i class="iconfont mr-5" :class="star == 0 ? 'icon-shoucang' : 'icon-shoucang1 isActive'"></i>
            <span>{{ star == 0 ? '收藏' : '取消收藏' }}</span>
        </div>
    </div>
</template>
  
<script>
export default {
    name: 'StarBtn',
    props: {
        star: {
            type: Number,
            default: 0
        },
        index: {
            type: [Number, String],
            default: ''
        }
    },
    data() {
        return {

        }
    },
    methods: {
        handleClick() {
            this.$emit('starClick', this.star, this.index)
        }
    }
}
</script>
  
<style scoped>
.star-btn:hover {
    cursor: pointer;
}

.iconfont {
    font-size: 18px;
}

.isActive {
    color: red;
}
</style>
  